<template>
  <div class="root">
    <!-- bidirectional data binding（双向数据绑定） -->
    <quill-editor v-model="content" class="myQuillEditor" 
      ref="text"
      :options="editorOption" />
    <el-button class="btn" type="primary"  @click="submit">提交</el-button>
  </div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
import { quillRedefine } from 'vue-quill-editor-upload'
export default {
  components: { quillEditor, quillRedefine },
  data () {
    return {
      content: '',
      editorOption: {}  // 必须初始化为对象 init  to Object
    }
  },
  created () {
    this.editorOption = quillRedefine(
      {
        // 图片上传的设置
        uploadConfig: {
          action: '',  // 必填参数 图片上传地址
          // 必选参数  res是一个函数，函数接收的response为上传成功时服务器返回的数据
          // 你必须把返回的数据中所包含的图片地址 return 回去
          res: (respnse) => {
            return respnse.info
          },
          methods: 'POST',  // 可选参数 图片上传方式  默认为post
          token: sessionStorage.token,  // 可选参数 如果需要token验证，假设你的token有存放在sessionStorage
          name: 'img',  // 可选参数 文件的参数名 默认为img
          size: 500,  // 可选参数   图片限制大小，单位为Kb, 1M = 1024Kb
          accept: 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon',  // 可选参数 可上传的图片格式
          // start: function (){}
          start: () => {
          },  // 可选参数 接收一个函数 开始上传数据时会触发
          end: () => {
          },  // 可选参数 接收一个函数 上传数据完成（成功或者失败）时会触发
          success: () => {
          },  // 可选参数 接收一个函数 上传数据成功时会触发
          error: () => {
          }  // 可选参数 接收一个函数 上传数据中断时会触发
        },
        // 以下所有设置都和vue-quill-editor本身所对应
        placeholder: '输入活动内容',  // 可选参数 富文本框内的提示语
        theme: '',  // 可选参数 富文本编辑器的风格
        // toolOptions: [],  // 可选参数  选择工具栏的需要哪些功能  默认是全部
        handlers: {}  // 可选参数 重定义的事件，比如link等事件
      }
    )
    console.log(this.editorOption)
  },
  methods: {
    submit () {
      console.log(this.content)
      console.log('=====================')
      console.log(this.$refs.text.value)
    }
  }
}
</script>

<style>
.btn {
  float: right;
  margin-top: 20px;
}
</style>